<template>
	<view class="eval-game-cover">
		<image :src="data.indexImgUrl" class="eval-bg" mode="widthFix"></image>
		
		<view class="input" v-if="typeId == 16">
			<input type="text" value="" placeholder="请输入你的姓氏" @input="bindinput" />
		</view>
		<view class="box_main" v-if="typeId == 20">

		</view>
		<view class="input1" v-if="typeId == 20">
			<input type="text" value="" placeholder="请输入你的名字" @input="bindinput" />
		</view>
		<view class="input2" v-if="typeId == 21">
			<picker
				mode="date"
				:value="date1"
				start="1900-01-01"
				end="2021-09-14"
				@change="bindDateChange"
				fields="day"
			>
				<view class="picker" style="font-size: 32rpx;">{{date ? date : '请选择你的出生日期'}}</view>
			</picker>
		</view>
		<view @click="skip" class="eval-skip">
			<image :src="data.BgImgUrl" class="eval-btn"></image>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['typeId', 'gameId', 'data', 'list'],
		data() {
			return {
				xing: "0",
				value: "",
				date: "",
        date1: "2000-01-01",
				// list: ["洪", "张", "王", "吴", "赵"],
			}
		},
		methods: {
			skip() {
				this.xing = '0';
				if(this.list&&this.list.length > 0){
					this.list.forEach((item) => {
						if (item !== this.value.trim()) {
							console.log('不存在,请重新输入姓氏');
						} else {
							console.log('存在');
							this.xing = '1';
							return
						}
					});
				}
				if (this.typeId != '16' && this.typeId != '20' && this.typeId != '21') {
					console.log("this.typeId====",this.typeId);
					this.$emit('next', this.gameId)
				} else if (this.typeId == '16') {
					console.log("this.typeId=====",this.typeId);
					if (!this.value) {
						tt.showToast({
							title: "请输入姓氏",
							duration: 2000,
						});
					} else {
						this.value=this.value.trim()
						tt.request({
							url: 'https://vs.tuiwa.com/dy_mini/check_content',
							method: 'POST',
							data: {
								appId: 'ttb2dfc4622de58bd4',
								content: this.value
							},
							header: {
								'content-type': 'application/json',
							},
							success: (res) => {
								console.log(res.data.data)
								if (res.data.data) {
									tt.showToast({
										title: "涉及敏感词",
										during: 1500 
									})
									return
								} else {
									if(this.xing == '1'){
										console.log("xing===",this.xing)
										const globalData = getApp().globalData
										globalData.gameInfo.typeId = this.typeId;
										globalData.gameInfo.answerRes = this.value;
										this.$emit('next', this.gameId)
									}else{
										tt.showToast({
											title: "还未收录该姓氏",
											duration: 2000,
											success: () => {
												console.log('typeId', this.typeId);
											},
										});
									}
								}
							}
						});
					}
				} else if (this.typeId == '20') {
					console.log("this.typeId=====", this.typeId);
					if (!this.value) {
						tt.showToast({
							title: "请输入姓名",
							duration: 2000,
						});
					} else {
						this.$emit('next', this.gameId)
					}
				} else if (this.typeId == '21') {
					console.log("this.typeId==========", this.typeId);
					console.log(this.date);
					if (!this.date) {
						tt.showToast({
							title: "请输入出生日期",
							duration: 2000,
						});
					} else {
						this.$emit('next', this.gameId)
					}
				}
			},
			bindinput(e) {
				this.value = e.detail.value
			},
			bindDateChange: function (e) {
				console.log("picker发送选择改变，携带值为", e.detail.value);
				this.date = e.detail.value;
			},
		}
	}
</script>

<style lang="scss" scoped>
	@keyframes dynamic {
		0% {
			transform: scale(0.85)
		}

		50% {
			transform: scale(1)
		}

		100% {
			transform: scale(0.85)
		}
	}

	.eval-game-cover {
		width: 100vw;
		height: 100vh;
		position: relative;
		overflow: hidden;
	}
	.eval {
		&-bg {
			width: 100vw;
			// height: 100vh;
		}

		&-skip {
			width: 400rpx;
			height: 160rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			bottom: 118rpx;
			left: 50%;
			transform: translateX(-50%);

			.btn-default {
				width: 280rpx;
				height: 90rpx;
				line-height: 90rpx;
				text-align: center;
				background-color: #48CFE5;
				color: #FFFFFF;
				font-size: 36rpx;
				border-radius: 45rpx;
				animation: 1s dynamic infinite;
			}
		}

		&-btn {
			width: 447rpx;
			height: 105rpx;
			position: absolute;
			// left: 50%;
			// top: 50%;
			transform: translate(-50%, -50%);
			animation: 1s dynamic infinite;
		}
	}
	.box_main {
		width: 670rpx;
		height: 400rpx;
		background: url(http://fcdn.qiushilaile.com/game/default-76611634613520670.png) no-repeat;
		background-size: 100% 100%;
		position: absolute;
		top: 82.5%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.input {
		position: absolute;
		top: 75%;
		left: 54%;
		transform: translate(-50%, -50%);
		width: 446rpx;
		height: 100rpx;
		background: url(http://fcdn.qiushilaile.com/game/default-83841629805569906.png) no-repeat;
		background-size: 100% 100%;
	}
	.input input {
		width: 50%;
		margin: 15px auto 0;
		color: #000;
		text-align: center;
		transform: translateX(-10px);
	}

	.input1 {
		position: absolute;
		top: 77%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 446rpx;
		height: 100rpx;
		background: url(http://fcdn.qiushilaile.com/game/default-78651632479291146.png) no-repeat;
		background-size: 100% 100%;
	}
	.input1 input {
		width: 50%;
		margin: 24rpx auto 0;
		color: #000;
		text-align: center;
		// transform: translateX(-10px);
	}

	.input2 {
		position: absolute;
		top: 78%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 446rpx;
		height: 100rpx;
		background: url(http://fcdn.qiushilaile.com/game/default-38851632832341662.png) no-repeat;
		background-size: 100% 100%;
	}
	.input2 picker {
		height: 50px;
		line-height: 50px;
		text-align: center;
	}
</style>
